<template>
	<view>
		<block v-if="multiple">
			<view class="image_box" v-if="realSrcList&&realSrcList.length!=0">
				<view class="img" v-for="(img,index) in realSrcList" :key="index">
					<u-image @click="previewImage(index,realSrcList)" :src="img" :width="width" :height="height"
						:lazy-load="true" :radius="8" :showLoading="true" :mode="mode">
						
						</u-image>
				</view>
			</view>
		</block>
		<block v-if="!multiple">
			<view class="image_box" v-if="realSrcList&&realSrcList.length!=0">
				<u-image @click="previewImage(0,realSrcList)" :src="realSrcList[0]" :width="width"
					:height="height" :lazy-load="true" :radius="8" :showLoading="true" :mode="mode"></u-image>
			</view>
		</block>
		
		
	</view>
</template>

<script>
	export default {
		name: "ImagePreview",
		props: {
			src: {
				type: String,
				default: ""
			},
			multiple: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			preview:{
				type: Boolean,
				default: () => {
					return true
				}
			},
			radius: {
				type: Number,
				default: 4
			},
			width: {
				type: [Number, String],
				default: '130rpx'
			},
			height: {
				type: [Number, String],
				default: '130rpx'
			},
			mode:{
				type: String,
				default: () => {
					return 'aspectFill'
				}
			}
		},
		computed: {

			realSrcList() {
				if (!this.src) {
					return;
				}
				let real_src_list
				if (typeof(this.src) == 'string') {
					real_src_list = this.src.split(",");
				} else {
					real_src_list = this.src;
				}

				let srcList = [];
				real_src_list.forEach(item => {
					return srcList.push(item);
				});
				return srcList;
			},
			realWidth() {
				return typeof this.width == "string" ? this.width : `${this.width}rpx`;
			},
			realHeight() {
				return typeof this.height == "string" ? this.height : `${this.height}rpx`;
			}
		},
		methods:{
			previewImage(index, list) {
				if(!this.multiple){
					return
				}
				let lists
				if (typeof(list) == 'string') {
					lists = list ? list.split(",") : [];
				} else {
					lists = list
				}
				let photoList = lists.map(item => {
					return item;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			}
		}
	};
</script>
</script>

<style lang="scss" scoped>
	.image_box {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;

		.img {
			margin: 0 20rpx 20rpx 0;
		}
	}
</style>